<template>
  <div>
    <div class="suport-banner">
      <h3>通知，banner等</h3>
    </div>
    <div class="search-wrap">
      <div class="search-div"><input placeholder="请输入搜索关键词" v-model="search" /><van-icon name="search" /></div>
    </div>
    <div class="content-xx">
      <div class="left-scroll">
        <div class="left-cats">
          <div
            class="cat-item"
            @click="active_cat = ''"
            :class="{ active: '' == active_cat }"
          >
            全部
          </div>
          <div
            class="cat-item"
            v-for="(item, index) in cList"
            @click="active_cat = item"
            :class="{ active: item == active_cat }"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="main-scroll">
        <div class="goods-list">
          <router-link :to="{'path':'/support/detail','query':{'name':item['物资名称']}}"  v-for="(item, index) in resList">
          <div class="good-item-box">
            <div class="title">
              {{ item["物资名称"] }}
            </div>
            <div class="row-1">
              <span>总数:{{ item.count }} {{ item["计量单位"] }}</span>
            </div>
            <div class="row-1">
              <span>规格:{{ item["规格"] ? item["规格"] : "- -" }}</span>
            </div>
            <div class="row-1 tags">
              <span>{{ item["应对灾害种类"] }}</span> <span>{{ item["储备方式"] }}</span>
            </div>
          </div>
        </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import goodsLogs from "@/tempData/物资总记录.js";
import goods from "@/tempData/物资表.js";
import cList from "@/tempData/物资分类.js";
import shopList from '@/tempData/物资站点.js';

export default {
  data() {
    return {
      search: "",
      goodsLogs,
      cList,
      goods,
      shopList,
      active_cat: "",
      
    };
  },
  created() {},
  computed: {
    resList() {
      //条件输出
      var list = this.goods.filter((item) => {
        let in_cat = this.active_cat == "" || item["应对灾害种类"] == this.active_cat;
        let search = this.search.trim();
        let in_search = search == "" || item["物资名称"].includes(search);
        
        return in_cat&&in_search;
      });
      return list;
    },
  },
  mounted() {
    // alert("开发中");
    // this.$router.push('/')
  },
};
</script>
<style scoped>
.good-item-box .title {
    /* white-space: normal; */
    font-size: 17px;
    word-break: break-all;
    color: black;
}

</style>

